<template>
	<view class="height-screen relative">
		<image src="@/static/img/homeBg.png" style="height: 600rpx;width: 100vw;" class="absolute" />
		<cu-custom bgColor="bg-white">
			<block slot="content">{{$t('tabBar.home')}}</block>
		</cu-custom>
		<view class="grid gap padding-top">
			<view class="margin-ht grid gap-sm" id="SearchBox">
				<view class="flex align-center">
					<view class="flex flex-direction flex-shrink align-center"
						@tap.stop="helper.routerNav('/pages/home/msgList')">
						<image src="@/static/img/message.png" style="width: 35rpx;height: 35rpx;" />
						<text class="text-xs text-black font-400 margin-top-xxs">{{$t('home.message')}}</text>
					</view>
					<view class="margin-left flex-sub">
						<u-search :placeholder="$t('home.searchMsg')" v-model="keyword" height="35" searchIconSize="30"
							:clearabled="false" :showAction="false" @focus="searchFocus"></u-search>
					</view>
				</view>
				<u-swiper :list="bannarList" :height="150" :indicator="true" indicatorMode="dot"></u-swiper>
			</view>
			<view class="flex" :style="{height:saleHeight+'px'}" style="background: #f1f1f1;">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view radius-xs"
					:scroll-top="scrollTop">
					<view v-for="(item,index) in leftList" :key="index" class="flex justify-between align-center"
						:style="{borderRadius:leftIndex==index?'15rpx 0 0 15rpx':''}"
						:class="[leftIndex==index ? 'u-tab-item-active leftSoild' : 'u-tab-item']" :data-current="index"
						@tap.stop="swichMenu(index)">
						<text class="one-line">{{item.name}}</text>
					</view>
				</scroll-view>
				<scroll-view scroll-y scroll-with-animation class="bg-white flex flex-direction" style="height: 100%;"
					:style="{width: 'calc(100vw - 150rpx)'}" @scrolltolower="handleScrolltolower">
					<view class="flex justify-around align-center padding-tb">
						<text :class="sortIndex==0?'sortActive':'sort'"
							@tap.stop="handleSort(0)">{{$t('home.totalSort')}}</text>
						<view class="flex align-center" @tap.stop="handleSort(1)">
							<text :class="sortIndex==1?'sortActive':'sort'">{{$t('home.numberSort')}}</text>
							<text :class="sortIndex==1&&sortType=='add'?'cuIcon-fold':'cuIcon-unfold'"
								style="margin-left: 5rpx;" />
						</view>
						<view class="flex align-center" @tap.stop="handleSort(2)">
							<text :class="sortIndex==2?'sortActive':'sort'">{{$t('home.priceSort')}}</text>
							<text :class="sortIndex==2&&sortType=='add'?'cuIcon-fold':'cuIcon-unfold'"
								style="margin-left: 5rpx;" />
						</view>
					</view>
					<view class="grid gap padding-lr-sm padding-bottom-sm">
						<view class="bg-white radius-xs padding-sm flex align-center"
							style="box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0,0,0,0.15);" v-for="(item,index) in dataList"
							:key="index" @tap.stop="helper.routerNav('/pages/home/shopDetail',{id:item.id})">
							<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
								class="radius-xs flex-shrink" />
							<view class="grid flex-sub margin-left-sm" style="gap: 8rpx;">
								<text class="font-bold text-black text-df one-line">{{item.name}}</text>
								<text class="text-xs text-gray font-400 one-line">{{item.introduce}}</text>
								<view class="flex align-center justify-between">
									<text class="text-xl text-red font-bold">${{item.price}}</text>
									<view class="flex align-center">
										<!-- 	<image src="@/static/img/collect.png" style="width: 35rpx;height: 33rpx;"
											v-if="item.collect_status==0" @tap.stop="handleLike(item.id,index,0)" />
										<image src="@/static/img/collectActive.png" style="width: 35rpx;height: 33rpx;"
											v-else @tap.stop="handleLike(item.id,index,1)" /> -->
										<!-- <image src="@/static/img/carAdd.png" style="width: 42rpx;height: 39rpx;"
											class="margin-left" @tap.stop="cartAdd(item.id)" /> -->
										<view class="flex align-center ">
											<view class="minus" @tap.stop="cartAdd(item.id,0,item)">
												<u-icon v-if="item.cart_num>0" name="minus-circle"
													color="rgb(6, 193, 104)" size="17"></u-icon>
											</view>
											<view style="width: 20px;text-align: center;" class="input">
												<text v-if="item.cart_num>0">{{item.cart_num}}</text>
											</view>
											<view class="plus" @tap.stop="cartAdd(item.id,1,item)">
												<u-icon name="plus-circle-fill" color="rgb(6, 193, 104)"
													size="17"></u-icon>
											</view>
										</view>
									</view>
								</view>
								<view class="flex justify-between align-center">
									<view class="flex align-center text-gray text-xs font-400">
										<text>{{$t('home.mothSallNum')}}:{{item.total_sall_num}}</text>
										<text class="margin-left">{{$t('group.comment')}}:{{item.comment_num}}</text>
									</view>

								</view>
							</view>
						</view>
						<section class="empty" v-if="!dataList.length">
							<u-empty mode="list" :text="$t('list.empty')" />
						</section>
					</view>
				</scroll-view>
			</view>
		</view>
		<tabBar :currentTabbar="0" />
	</view>
</template>
<script>
	import {
		get_lists,
		goods_cate,
		goods_lists,
		goods_collect,
		goods_collect_del,
		cartAdd,
		changeNum
	} from '@/apis'
	import tabBar from '@/components/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				keyword: '',
				bannarList: [],
				saleHeight: 0,
				leftList: [],
				leftIndex: 0,
				sortIndex: 0,
				sortType: 'sub',
				dataList: [],
				orderType: 1,
				page: 1,
				scrollTop: "",
				value: 0,
				lastPage: null,
			}
		},
		mounted() {
			this.computedHeight()
		},
		onLoad() {
			this.sortIndex = 0
			this.page = 1
			this.dataList = []
			this.get_lists()
			this.goods_cate()
		},
		onShow() {
			// this.sortIndex = 0
			// this.page = 1
			// this.dataList = []
			// this.get_lists()
			// this.goods_cate()
		},
		onReachBottom() {
			this.page++
			this.get_lists(this.leftList[this.leftIndex].id)
		},
		methods: {
			async get_lists() {
				this.bannarList = []
				const res = await get_lists()
				res.forEach(item => {
					this.bannarList.push(this.helper.handleImage(item.image))
				})
			},
			async goods_cate() {
				this.leftList = [{
					id: '',
					name: this.$t('home.referee')
				}]
				const res = await goods_cate()
				this.leftList = this.leftList.concat(...res)
				this.goods_lists(this.leftList[this.leftIndex].id)
			},
			async goods_lists(cate_id) {
				const res = await goods_lists({
					cate_id,
					keywords: '',
					recommend: cate_id ? 0 : '2',
					order_type: this.orderType,
					page: this.page
				})
				// console.log("res", res.last_page)
				this.lastPage = res.last_page
				this.dataList = this.dataList.concat(...res.data)
			},
			handleScrolltolower() {
				console.log("handleScrolltolower", this.page, this.lastPage)
				if (parseInt(this.page) >= parseInt(this.lastPage)) {
					return
				}
				this.page++
				this.goods_lists(this.leftList[this.leftIndex].id)
			},
			searchFocus() {
				this.helper.routerNav('/pages/home/shopSearch')
			},
			async computedHeight() {
				let platform = uni.getStorageSync('platform')
				let num = platform == 'android' ? 50 : 84
				this.saleHeight = await this.helper.computedHeight(this, '#SearchBox', this.CustomBar + 30 + num)
			},
			async swichMenu(index) {
				if (index == this.leftIndex) return;
				this.leftIndex = index;
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				this.dataList = []
				this.sortIndex = 0
				this.orderType = 1
				this.page = 1
				this.goods_lists(this.leftList[this.leftIndex].id)
			},
			handleSort(index) {
				switch (index) {
					case 0:
						this.sortIndex = index
						this.orderType = 1
						break;
					case 1:
						if (this.sortType == 'sub') {
							this.sortType = 'add'
							this.orderType = 2
						} else {
							this.sortType = 'sub'
							this.orderType = 3
						}
						this.sortIndex = index
						break
					case 2:
						if (this.sortType == 'sub') {
							this.sortType = 'add'
							this.orderType = 4
						} else {
							this.sortType = 'sub'
							this.orderType = 5
						}
						this.sortIndex = index
						break
				}
				this.dataList = []
				this.goods_lists(this.leftList[this.leftIndex].id)
			},
			async handleLike(id, index, isDel) {
				if (isDel == 0) {
					await goods_collect({
						goods_id: id
					})
				} else {
					await goods_collect_del({
						goods_id: id
					})
				}
				this.dataList[index].collect_status = this.dataList[index]
					.collect_status == 0 ? 1 : 0
			},
			async cartAdd(id, type, item) {
				if (type == 1) {
					item.cart_num++
					await cartAdd({
						goods_id: id
					})
					// this.helper.showToast(this.$t('message.success'))
					// this.goods_lists()
				} else {
					// if(item.cart_num == 1)return
					item.cart_num--
					await changeNum({
						num: item.cart_num,
						goods_id: id
					})
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
	.sortActive {
		font-weight: bold;
		font-size: 24rpx;
		color: #06C168;
	}

	.sort {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
	}

	.u-tab-view {
		width: 150rpx;
		height: 100%;

		.u-tab-item {
			height: 80rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			padding-left: 30rpx;
		}

		.u-tab-item-active {
			height: 80rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 24rpx;
			color: #06C168;
			padding-left: 30rpx;
			background: #fff;
		}
	}
</style>